<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style type="text/css">
        #n4{color:red;}
    </style>
</head>
<body>
    <ul id="names">
        <li id="n1">Bob</li>
        <li id="n2">PJ</li>
        <li id="n3">Teddy</li>
        <li id="n4">Chariel</li>
        <li id="n5">Gabe</li>
        <li id="n6">Dorra</li>
    </ul>
    <input type="button" value="父节点" onclick="showContent(current.parentNode)">
    <input type="button" value="第一个子节点" onclick="showContent(current.parentNode.firstChild.nextSibling)">
    <input type="button" value="上一个节点" onclick="showContent(current.previousSibling.previousSibling)">
    <input type="button" value="下一个节点" onclick="showContent(current.nextSibling.nextSibling)">
    <input type="button" value="最后一个子节点" onclick="showContent(current.parentNode.lastChild.previousSibling)">
    <input type="button" value="得到所有li元素的个数" onclick="showCount()">

    <script type="text/javascript">
        var current=document.getElementById("n4");
        function showContent(target){
            alert(target.innerHTML);
        }
       function showCount(){
            alert(document.getElementsByTagName("li").length);
       }
    </script>
</body>
</html>